<template>
    <div>

<h2 align="center">会员注册</h2>
<table class="table table-bordered">
    <tr>
        <td align="right">手机号</td>
        <td><input type="text" v-model="data.state.Phone"/></td>
    </tr>
    <tr>
        <td align="right">密码</td>
        <td><input type="password" v-model="data.state.Pwd"/></td>
    </tr>
    <tr>
        <td align="right">确认密码</td>
        <td><input type="password"/></td>
    </tr>
    <tr>
        <td align="right">真实姓名</td>
        <td><input type="text" v-model="data.state.name"/></td>
    </tr>
    <tr>
        <td align="right">证件类型</td>
        <td>
            <select v-model="state.cardType">
                <option value="">请选择</option>
                <option :value="item.id" v-for="item in type">{{ item.con }}</option>
            </select>
        </td>
    </tr>
    <tr>
        <td align="right">证件号码</td>
        <td><input type="text" v-model="data.state.cardCode"/></td>
    </tr>
    <tr>
        <td align="right">性别</td>
        <td>
            <input type="radio" name="sex" :value="false"/>男
            <input type="radio" name="sex":value="true"/>女
        </td>
    </tr>
    <tr>
        <td align="right"></td>
        <td><input type="button" value="注册" /></td>
    </tr>
</table>
    </div>
</template>

<script setup lang="ts">

import { reactive,toRefs } from 'vue';
let data=reactive({
    //存储表单数据
    state:{
        Phone:'',
        Pwd:'',
        name:'',
        cardType:'',
        cardCode:'',
        sex:''
    },
    //存储证件类型
    type:[
{id:1,con:'身份证'},
{id:2,con:'护照'},
    ]
})
let {state,type}=toRefs(data)
function Register(){

}
</script>

<style scoped>

</style>